﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/echarts.js"></script>
    <script src="js/excel.js"></script>
    <style>
        .main {
            width: 100%;
            height: 100%;
        }
    </style>
    <script>
        $(document).ready(function () {
            $(".img1").hover(function () {
                $(".img1").attr("src", "resource/export-2.png");
            }, function () {
                $(".img1").attr("src", "resource/export-1.png");
            });
        });
    </script>


<body>
<div class="main">
    <div class="heading1">
        用户分析
    </div>
    <div style="width: 80px;height: 30px;float:right;margin-right: 100px;">
        <img class="img1" src="resource/export-1.png" alt="" style="width: 100%;height: 100%;CURSOR: pointer"
             onclick="tableToExcel()"></div>
    <div class="section1">
        <div class="heading2">
            每日访问量：
        </div>
		<div>
			<div style="float: right;margin-top: -30px;color: #999999;
		font-size:18px;
		font-family: Microsoft YaHei UI;
		letter-spacing:0.75px;">
            总用户数量：
        </div>
        <div style="width: 100px;height: 60px;font-size: 40px;font-family: Microsoft YaHei UI;color: #47bde1;margin-left: 523px;margin-top: 10px;"
             id="total">
            2333
        </div>	
		</div> 
        <div id="User_line" style="width: 570px; height:380px;margin-left:50px;position: absolute;top: 90px;"></div>
    </div>

   
    <div class="section3">
		<div class="heading2">
            每月新增用户量占比:
        </div>
        <!--饼图-->
        <div id="NewUser_pie" style="width: 180px;height: 180px;top: 20px;left: 67px;"></div>
		<div class="heading2">
            每月活跃用户量占比:
        </div>
        <div id="ActiveUser_pie" style="width: 180px;height: 180px;top: 20px;left: 67px;"></div>
    </div>

</div>
</body>
<script>
    document.getElementById("total").innerHTML = totalData['总用户量'][0];
</script>
<script>
    (function () {
        var UserLineChart = echarts.init(document.getElementById("User_line"));
        var UserLineChartOption = getUserBarOption(option_multibar, '月用户总量', '月新增用户数量', '月活跃用户量', '每月用户统计');

        UserLineChart.setOption(UserLineChartOption);
        var NewUserPieChart = echarts.init(document.getElementById("NewUser_pie"));
        NewUserPieChart.setOption(getUserPieOption(option_pie, '月用户总量', '月新增用户数量', '新增用户', '已有用户', UserLineChartOption.xAxis[0].data[0], "每月新增用户量占比"));

        var ActiveUserPieChart = echarts.init(document.getElementById("ActiveUser_pie"));
        ActiveUserPieChart.setOption(getUserPieOption(option_pie, '月用户总量', '月活跃用户量', '活跃用户', '沉默用户', UserLineChartOption.xAxis[0].data[0], "每月活跃用户量占比"));

        UserLineChart.on('updateAxisPointer', function (event) {
            var xAxisInfo = event.axesInfo[0];
            if (xAxisInfo) {
                var when = UserLineChartOption.xAxis[0].data[xAxisInfo.value];
                NewUserPieChart.setOption(getUserPieOption(option_pie, '月用户总量', '月新增用户数量', '新增用户', '已有用户', when, "每月新增用户量占比"));
                ActiveUserPieChart.setOption(getUserPieOption(option_pie, '月用户总量', '月活跃用户量', '活跃用户', '沉默用户', when, "每月活跃用户量占比"));
            }
        });
    })();
</script>
</html>